<template>
	<view>
		<!-- 顶部导航 -->
		<TopNav :username="name"></TopNav>
		<!-- logo欢迎语 -->
		<view class="center flex  align-center">
			<view class="">
				<image src="/static/logo.png" mode="" style="width: 300rpx;height: 200rpx;"></image>
			</view>
			<view class="">
				<text class="" style="font-size: 30px;">欢迎注册</text>
			</view>
		</view>
		<!-- 验证手机号 -->
		<view class="center p-5">
			<!-- 步骤 -->
			<!-- <view class=" mb-10">
				<uni-steps :options="list1" :active="active" active-color="#fc7c08" />
			</view> -->
			<!-- 设置信息 -->
			<view class="flex justify-center align-center flex-column">
				<!-- 个人信息 -->
				<view class="flex justify-center flex-column align-center">
					<text class="h2">填写信息</text>
					<uni-forms ref="baseForm" :modelValue="enterprise_info">
						<view class="flex flex-column">
							<view class="font-sm text-blue">
								<view class="flex align-center">
									<text>企业基本信息</text>
									<uni-icons color="#3980fc" type="right"></uni-icons>
								</view>
							</view>
							<view class="">
								<uni-forms-item name="Enterprise_Name" label-width="100" label="企业名称:" required>
									<uni-easyinput v-model="enterprise_info.Enterprise_Name" placeholder="请输入企业名称" />
								</uni-forms-item>
							</view>
							<!-- <view class="">
								<uni-forms-item name="Enterprise_Address" label-width="100" label="企业注册地址:" required>
									<uni-data-picker @change="CityChange" v-model="enterprise_info.Enterprise_Address"
										placeholder="请选择地址" popup-title="请选择城市" collection="opendb-city-china"
										field="code as value, name as text" orderby="value asc" self-field="code"
										parent-field="parent_code" :clear-icon="true"></uni-data-picker>
								</uni-forms-item>
							</view> -->
							<view class="">
								<uni-forms-item name="Enterprise_Address" label-width="100" label="办公地址:" required>
									<uni-easyinput v-model="enterprise_info.Enterprise_Address" placeholder="请输入办公地址" />
								</uni-forms-item>
							</view>
							<view class="">
								<uni-forms-item name="Postal_Code" label-width="100" label="邮政编码:" required>
									<uni-easyinput v-model="enterprise_info.Postal_Code" placeholder="请输入邮政编码" />
								</uni-forms-item>
							</view>
							<view class="">
								<uni-forms-item name="Tax_Number" label-width="100" label="营业执证编号:" required>
									<uni-easyinput v-model="enterprise_info.Tax_Number" placeholder="请输入营业执证编号" />
								</uni-forms-item>
							</view>
							<view class="">
								<uni-forms-item name="Enterprise_Phone" label-width="100" label="企业电话:" required>
									<uni-easyinput v-model="enterprise_info.Enterprise_Phone" placeholder="请输入企业电话" />
								</uni-forms-item>
							</view>
							<view class="">
								<uni-forms-item name="Enterprise_Contacts" label-width="100" label="联系人姓名:" required>
									<uni-easyinput v-model="enterprise_info.Enterprise_Contacts"
										placeholder="请输入联系人姓名" />
								</uni-forms-item>
							</view>
							<view class="">
								<uni-forms-item name="Enterprise_Contacts_Mobile" label-width="100" label="联系人手机:"
									required>
									<uni-easyinput v-model="enterprise_info.Enterprise_Contacts_Mobile"
										placeholder="请输入联系人手机" />
								</uni-forms-item>
							</view>
							<view class="">
								<uni-forms-item name="E_Mail" label-width="100" label="电子邮箱:" required>
									<uni-easyinput v-model="enterprise_info.E_Mail" placeholder="请输入电子邮箱" />
								</uni-forms-item>
							</view>
							<view class="">
								<uni-forms-item label-width="100" label="推荐人代码:">
									<uni-easyinput placeholder="请输入推荐人代码" />
								</uni-forms-item>
							</view>
							<view class="font-sm text-blue">
								<view class="flex align-center">
									<text>银行账户信息</text>
									<uni-icons color="#3980fc" type="right"></uni-icons>
								</view>
							</view>
							<view class="">
								<uni-forms-item label-width="100" label="账户名称:" required>
									<view class="px-2 py-1"
										style="border: 2rpx solid #eee;border-radius: 10rpx;transition: all 0.3s;"
										:style="'border-color:'+ borderColor+';'">
										<input @focus="focus" @blur="blur"
											v-model.trim="enterprise_info.Children.enterprise_account[0].Account_Name"
											:placeholder-style="borderColor=='rgb(221,47,0)'?'color:rgb(221,80,100);':''"
											placeholder-class="font-sm" placeholder="请输入账户名称" type="text">
									</view>
									<text v-show="borderColor=='rgb(221,47,0)'" class="font-sm"
										style="color: rgb(221,47,0);">请输入账户名称</text>
								</uni-forms-item>
							</view>
							<view class="">
								<uni-forms-item label-width="100" label="开户银行:" required>
									<view class="">
										<uni-data-select
											v-model="enterprise_info.Children.enterprise_account[0].Bank_Name"
											:localdata="range" @change="change"
											placeholder="请选择开户的银行"></uni-data-select>
									</view>
								</uni-forms-item>
							</view>
							<view class="">
								<uni-forms-item label-width="100" label="银行账号:" required>
									<uni-easyinput
										v-model="enterprise_info.Children.enterprise_account[0].Account_Number"
										placeholder="请输入银行账号" />
								</uni-forms-item>
							</view>
							<view class="font-sm text-blue">
								<view class="flex align-center">
									<text>法定代表人信息</text>
									<uni-icons color="#3980fc" type="right"></uni-icons>
								</view>
							</view>
							<view class="">
								<uni-forms-item label-width="100" label="姓名:" required>
									<uni-easyinput
										v-model="enterprise_info.Children.enterprise_legal_person[0].Legal_Person"
										placeholder="请输入法人姓名" />
								</uni-forms-item>
							</view>
							<view class="">
								<uni-forms-item label-width="100" label="身份证号:" required>
									<uni-easyinput
										v-model="enterprise_info.Children.enterprise_legal_person[0].ID_Number"
										placeholder="请输入法人身份证号" />
								</uni-forms-item>
							</view>
							<view class="">
								<uni-forms-item label-width="100" label="手机:" required>
									<uni-easyinput v-model="enterprise_info.Children.enterprise_legal_person[0].Mobile"
										placeholder="请输入法人手机号" />
								</uni-forms-item>
							</view>
						</view>
					</uni-forms>
					<uni-forms ref="form" :modelValue="system_user_info">
						<view class="font-sm text-blue">
							<view class="flex align-center">
								<text>授权管理员信息</text>
								<uni-icons color="#3980fc" type="right"></uni-icons>
							</view>
						</view>
						<view class="">
							<uni-forms-item label-width="100" label="姓名:" required>
								<uni-easyinput v-model="system_user_info.ID_Name" placeholder="请输入授权管理员姓名" />
							</uni-forms-item>
						</view>
						<view class="">
							<uni-forms-item label-width="100" label="身份证号:" required>
								<uni-easyinput v-model="system_user_info.ID_SerialNumber" placeholder="请输入授权管理员身份证号" />
							</uni-forms-item>
						</view>
						<view class="">
							<uni-forms-item label-width="100" label="手机:" required>
								<uni-easyinput v-model="system_user_info.User_Number" placeholder="请输入授权管理员手机" />
							</uni-forms-item>
						</view>
						<view class="flex justify-between">
							<view class="">

							</view>
							<view class="font-sm">
								<checkbox-group @change="CheckChange">
									<label class="flex align-center">
										<checkbox :value="checkvalue" :checked="false" />
										<view>
											<text>我已阅读并同意</text>
											<text class="text-blue">《交易商入市协议》</text>
											<text class="text-blue">《承诺函》</text>
										</view>
									</label>
								</checkbox-group>
								<button @click="register()" style="width: 400rpx;" class="uni-button font-sm"
									type="primary">成为商家</button>
							</view>
						</view>
					</uni-forms>
				</view>
			</view>
		</view>
		<Notify :type="type" :content="message" :show="shows"></Notify>
	</view>
</template>

<script>
	const app = getApp()
	import Notify from '@/components/Notify/Notify.vue'
	import TopNav from '@/components/top-nav2/top-nav2.vue'
	export default {
		data() {
			return {
				active: 1,
				type:'info',
				message:'',
				shows:false,
				checkvalue: '0',
				value: '',
				range: [{
						value: '中国建设银行',
						text: "中国建设银行"
					},
					{
						value: '中国农业银行',
						text: "中国农业银行"
					},
					{
						value: '中国银行',
						text: "中国银行"
					},
				],
				list1: [{
					title: '验证手机号'
				}, {
					title: '设置账号信息'
				}, {
					title: '注册成功'
				}],
				// 基础表单数据
				borderColor: '#eee',
				enterprise_info: { //提交的表单
					Enterprise_Info_SerialNumber: '', //主键
					Enterprise_Name: "", //企业名称
					Industry_SubCategory_SerialNumber: "101000000000001",
					Industry_Category_SerialNumber: "100000000000001",
					Enterprise_Address: '', //企业注册地址
					Postal_Code: '', //邮政编号
					Tax_Number: '', //营业执照注册号
					Enterprise_Phone: '', //企业电话
					Enterprise_Contacts: '', //企业联系人
					Enterprise_Contacts_Mobile: '', //企业手机号
					E_Mail: '', //电子邮箱
					Children: {
						enterprise_legal_person: [{
							Enterprise_Legal_Person_SerialNumber: "",
							Enterprise_Info_SerialNumoer: "",
							Legal_Person: '', //法人姓名
							ID_Number: '', //法人身份证号
							Mobile: '', //法人手机号
						}],
						enterprise_account: [{
							Enterprise_Account_SerialNumber: "",
							Enterprise_Info_SerialNumoer: "",
							Bank_Name: '', //开户行
							Account_Name: '',
							Account_Number: '', //银行账号
						}]
					}
				},
				system_user_info: {
					User_Number: "",
					ID_Name: '', //用户姓名
					ID_SerialNumber: '', //用户身份证号
					User_Number: '', //用户手机号
					Pass_Ward: "", //用户密码
					Enterprise_Info_SerialNumber: ""
				},
				rules1: {
					Enterprise_Name: {
						rules: [{
							required: true,
							errorMessage: '请输入企业名称'
						}]
					},
					Enterprise_Address: {
						rules: [{
							required: true,
							errorMessage: '请选择企业地址'
						}]
					},
					Postal_Code: {
						rules: [{
							required: true,
							errorMessage: '请输入邮政编码'
						}]
					},
					Tax_Number: {
						rules: [{
							required: true,
							errorMessage: '请输入营业执照注册号'
						}]
					},
					Tax_Registration_Number: {
						rules: [{
							required: true,
							errorMessage: '请输入税务登记证号'
						}]
					},
					Organization_Code_Certificate_Number: {
						rules: [{
							required: true,
							errorMessage: '请组织结构代码证号'
						}]
					},
					Enterprise_Phone: {
						rules: [{
							required: true,
							errorMessage: '请输入企业电话'
						}]
					},
					Enterprise_Contacts: {
						rules: [{
							required: true,
							errorMessage: '请输入联系人姓名'
						}]
					},
					Enterprise_Contacts_Mobile: {
						rules: [{
							required: true,
							errorMessage: '请输入企业联系人手机号'
						}]
					},
					E_Mail: {
						rules: [{
							required: true,
							errorMessage: '请输入电子邮箱'
						}]
					},
				},
				items: [{
						value: '0',
						name: '认证账号为个体',
						checked: 'true'
					},
					{
						value: '1',
						name: '认证账号为商家'
					}
				],
				current: 0
			}
		},
		components: {
			TopNav,
			Notify
		},
		onLoad(e) {
			this.system_user_info.Pass_Ward = e.password
			this.system_user_info.User_Number = e.phone
		},
		methods: {
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			CheckChange(e) {
				if (e.detail.value.length == 0) {
					this.checkvalue = '0'
				} else {
					this.checkvalue = '1'
				}
			},
			CityChange(e) {
				var arr = e.detail.value
			},
			change(e) {
				console.log("e:", e);
			},
			register() {
				this.$refs.baseForm.validate().then(res => {
					if (this.enterprise_info.Children.enterprise_account[0].Account_Name == '') {
						this.borderColor = 'rgb(221,47,0)'
						return
					}
					console.log(this.system_user_info)
					console.log(this.enterprise_info)
					uni.showLoading({
						title:'注册中...'
					})
					uni.request({//注册
						url: app.globalData.Domain_Name + '/Register_Enterprise',
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						method: "POST",
						data: {
							system_user_info: JSON.stringify({
								system_user_info: [this.system_user_info]
							}),
							enterprise_info: JSON.stringify({
								enterprise_info: [this.enterprise_info]
							})
						},
						success: (res) => {
							console.log(res.data);
							uni.hideLoading()
							if(res.data.Status=='success'){
								this.type = 'success'
								this.message="注册成功,即将跳转至登录页"
								this.shows = true
								setTimeout(()=>{
									this.shows = false
									uni.navigateTo({
										url:'/pages/Login/Login'
									})
								},2000)
							}
						}
					})
				}).catch(err => {
					if (this.enterprise_info.Children.enterprise_account[0].Account_Name == '') {
						this.borderColor = 'rgb(221,47,0)'
						return
					}
					console.log('表单错误信息：', err);
				})
			},
			focus() {
				this.borderColor = 'rgb(41,121,255)'
			},
			blur() {
				this.borderColor = '#eee'
			},
		}
	}
</script>

<style lang="scss">
	.center {
		width: 1200px;
		margin: auto;
	}
</style>